<template>
	<view class="comment-wrap">
		<div class="title">
			<slot name="title">
				<p>热门评论</p>
			</slot>
		</div>
		<ul>
			<li v-for="(item,index) in comment.hotComments" :key="index" class="comment-item">
				<image class="comment-avatar " :src="item.user.avatarUrl" mode="widthFix"></image>
				<span class="comment-nickname info">{{item.user.nickname}}</span>
				<p class="comment-nickname info">{{item.time | timeToDate}}</p>
				<p class="comment-content">{{item.content}}</p>
				<!-- <div>
					{{item}}
				</div> -->
			</li>
		</ul>
		<div class="title">
			<slot name="title">
				<p>最新评论</p>
			</slot>
		</div>
		<ul>
			<li v-for="(item,index) in comment.comments" :key="index" class="comment-item">
				<image class="comment-avatar " :src="item.user.avatarUrl" mode="widthFix"></image>
				<span class="comment-nickname info">{{item.user.nickname}}</span>
				<p class="comment-nickname info">{{item.time | timeToDate}}</p>
				<p class="comment-content">{{item.content}}</p>
				<!-- <div>
					{{item}}
				</div> -->
			</li>
		</ul>
	</view>
</template>

<script>
	import {
		formateDate
	} from "../utils/helper.js"
	export default {
		props: {
			comment: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		filters: {
			timeToDate(val) {
				return formateDate(new Date(val))
			}
		},
		created() {
			console.log(this.comment)
		}
	}
</script>

<style lang="scss">
	.comment-wrap {
		margin-bottom: 3rem;

		.title {
			padding: 10px 4px;
			background-color: #F1F1F1;
			font-size: .8rem;
		}

		.comment-item {
			border-bottom: 1px solid lighten(gray, 40%);


			.info {
				font-size: .6rem;
				color: gray;
			}

			.comment-avatar {
				width: 1.5rem;
				vertical-align: middle;
				border-radius: 50%;
				margin-right: .6rem;
			}

			.comment-content {
				font-size: .7rem;
				margin: .5rem 0;
			}
		}

	}
</style>
